<template>
  <div>

    <el-descriptions class="custom-descriptions" title="个人资料" direction="horizontal" :column="1" border>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/><span style="margin-left: 10px">用户头像</span>
        </template>
        <el-avatar size="mini" :src="userData.iconUrl"></el-avatar>
      </el-descriptions-item>


      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/><span style="margin-left: 10px">用户名</span>
        </template>
        {{ userData.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-basketball"/>
          <span style="margin-left: 10px">年龄</span>
        </template>
        {{ userData.age }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lollipop"/>
          <span style="margin-left: 10px">生日</span>
        </template>
        {{ userData.birthday }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-male"/>
          <span style="margin-left: 10px">性别</span>
        </template>
        {{ userData.gender }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"/>
          <span style="margin-left: 10px">城市</span>
        </template>
        {{ userData.city }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-discount"/>
          <span style="margin-left: 10px">学校</span>
        </template>
        {{ userData.school }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"/>
          <span style="margin-left: 10px">邮箱</span>
        </template>
        {{ userData.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-suitcase"/>
          <span style="margin-left: 10px">工作</span>
        </template>
        {{ userData.job }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-suitcase"/>
          <span style="margin-left: 10px">自我介绍</span>
        </template>
        {{ userData.introduce }}
      </el-descriptions-item>
    </el-descriptions>


    <el-button type="primary" plain size="small" style="margin:20px; float: right"
               @click="showUpdateUserDetail(userData)">修改个人信息
    </el-button>


    <!-- 修改个人信息的弹出框 -->
    <el-dialog class="article-preview-dialog" title="修改个人信息" :visible.sync="userDetailVisible">
      <el-form :model="editForm" :rules="editRules" :label-width="formLabelWidth">
        <!--      上传头像-->
        <el-form-item label="头像" prop="iconUrl">
          <el-upload
              class="picture-uploader"
              action="http://localhost:9090/v1/upload/image/iconUrl"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
            <i class="el-icon-upload picture-uploader-icon"></i>
            <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
            <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
          </el-upload>
          <div class="picture-preview" v-if="editForm.iconUrl">
            <el-image class="image"
                      :src="editForm.iconUrl"
                      fit="cover" style="border-radius: 200px"></el-image>
          </div>
        </el-form-item>



        <el-form-item label="生日" prop="birthday">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
                v-model="editForm.birthday"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="editForm.gender" label="0">男</el-radio>
          <el-radio v-model="editForm.gender" label="1">女</el-radio>

        </el-form-item>
        <el-form-item label="城市" prop="city">

          <el-select v-model="editForm.city"
                     placeholder="请选择城市">
            <el-option v-for="loc in locationArr"
                       :label="loc.name" :value="loc.name"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input v-model="editForm.school"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="工作" prop="job">
          <el-input v-model="editForm.job" placeholder="最多填写20个字"></el-input>
        </el-form-item>
        <el-form-item label="自我介绍" prop="introduce">
          <el-input v-model="editForm.introduce" placeholder="最多填写128个字"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDetailVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>




    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "UserData",
  data() {
    return {
      userData: {id:'',iconUrl:'',username:'',gender:'',age:'',city:'',school:'',birthday:'',introduce:'',email:'',job:'',phone:'',liked:''},

      // 编辑表单
      editForm: {
        id: '',
        iconUrl: '',
        gender: '',
        city: '',
        school: '',
        birthday: '',
        email: '',
        job: '',
        introduce: '',
      },
      //设置可选的日期不能超过当前日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      //表单规则验证
      // editRules: {
      //   birthday: [
      //     {required: true, message: '请输入生日', trigger: 'blur'},
      //   ],
      //   gender: [
      //     {required: true, message: '请选择性别', trigger: 'blur'},
      //   ],
      //   city: [
      //     {required: true, message: '请输入城市', trigger: 'blur'},
      //   ],
      //   school: [
      //     {required: true, message: '请输入学校名称', trigger: 'blur'},
      //     {min: 2, max: 20, message: '学校名称长度必须在 2 到 20 个字符', trigger: 'blur'}
      //   ],
      //   email: [
      //     {required: true, message: '请输入邮箱', trigger: 'blur'},
      //     {min: 2, max: 15, message: '邮箱名称长度必须在 2 到 20 个字符', trigger: 'blur'}
      //   ],
      //   job: [
      //     {required: true, message: '请输入工作', trigger: 'blur'},
      //     {min: 2, max: 20, message: '工作名称长度必须在 2 到 20 个字符', trigger: 'blur'}
      //   ],
      //   introduce: [
      //     {required: true, message: '请输入自我介绍', trigger: 'blur'},
      //     {min: 2, max: 50, message: '自我介绍长度必须在 2 到 50 个字符', trigger: 'blur'}
      //   ],
      // },
      // 编辑表单的label宽度
      formLabelWidth: '120px',
      // 预览文章详情相关数据
      userDetailVisible: false,
      //地址
      locationArr:[{id:1,name:'北京市'},{id:2,name:'上海市'},{id:3,name:'天津市'},{id:4,name:'重庆市'},{id:5,name:'黑龙江省'},{id:6,name:'辽宁省'},{id:7,name:'吉林省'},
        {id:8,name:'河北省'},{id:9,name:'河南省'},{id:10,name:'湖北省'},{id:11,name:'湖南省'},{id:12,name:'山东省'},{id:13,name:'山西省'},{id:14,name:'陕西省'},{id:15,name:'安徽省'},{id:16,name:'浙江省'},
        {id:17,name:'江苏省'},{id:18,name:'福建省'},{id:19,name:'广东省'},{id:20,name:'海南省'},{id:21,name:'四川省'},{id:22,name:'云南省'},{id:23,name:'贵州省'},{id:24,name:'青海省'},{id:25,name:'甘肃省'},
        {id:26,name:'江西省'},{id:27,name:'台湾省'},{id:28,name:'内蒙古自治区'},{id:29,name:'宁夏回族自治区'},{id:30,name:'新疆维吾尔自治区'},
        {id:31,name:'西藏自治区'},{id:32,name:'广西壮族自治区'},{id:33,name:'香港特别行政区'},{id:34,name:'澳门特别行政区'}],


    }
  },
  methods: {

    //用户信息
    userInfo() {
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:9090/v1/userdetail/" + localStorage.getItem('currentUserId') + "/info").then((response) => {
        console.log("登录用户id", localStorage.getItem('currentUserId'))

        if (response.data.code == 200) {
          this.userData = response.data.data;
        }
        if (response.data.data.gender == 0) {
          this.userData.gender = '男'
        } else if (response.data.data.gender == 1) {
          this.userData.gender = '女'
        } else {
          this.userData.gender = '未知'
        }
      })
    },


    //头像上传成功后的回调
    handleUploadSuccess(response){
      this.editForm.iconUrl = "http://"+response.data;
      console.log("头像路径:",this.editForm.iconUrl)
    },



    onSubmit() {
      console.log('submit!');
    },
    showUpdateUserDetail(userData) {

      this.userDetailVisible = true;
    },

    //提交表单
    submitEditForm(formName){

      // this.showEditDialog();
      //let formData = this.qs.stringify(this.editForm);

      // this.$refs['editForm'].validate((valid) => {
      //   if (valid){
          this.axios
              .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
              .post("http://localhost:9090/v1/users/" + localStorage.getItem('currentUserId') + "/update/detail", this.editForm).then((response) => {
            JSON.stringify(this.editForm.birthday)
            console.log("填完信息了----------{}", this.editForm)
            if (response.data.code == 200) {
              let updateResult = response.data;
              localStorage.setItem('currentUserIcon', updateResult.icon)
              this.$message({
                message: '修改用户信息成功！为保证头像成功更新,请您重新登录!',
                type: 'success'
              });
              this.userDetailVisible = false;
              this.userInfo();

            }
          })
        }

      // });
    // },

  },


  mounted: function (){
    //自动刷新显示个人资料
    this.userInfo();


  }

}
</script>

<style scoped>
.picture-uploader {
  float: left;
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.picture-uploader .picture-uploader-icon {
  width: 230px;
  height: 150px;
  font-size: 58px;
  color: #8c939d;
  line-height: 150px;
  text-align: center;
}

.picture-uploader .picture-uploader-text {
  width: 230px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  color: #8c939d;
}

.picture-uploader .picture-uploader-text i {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  color: #F56C6C;
}

.picture-preview {
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8e6e6;
  border-radius: 6px;
  float: left;
  display: inline;
  position: relative;
}

</style>